<template>
    <div class="rank-item">
        <a-row :gutter="16">
            <a-col :span="12" v-for="item in rankList" :key="item.key">
                <div class="item-list">
                    <div class="item-title">
                        <span>{{ item.label }}</span>
                        <small>（前3）</small>
                    </div>
                    <a-table :columns="item.columns" :key="item.key + 100" :data-source="item.tableData" :pagination="false" :customRow="(arg)=>{return customRow(arg,item)}">
                        <template slot='key' slot-scope="text, record,index">
                            <span :class="index === 0 ? 'rank first' : index === 1 ? 'rank second' : index === 2 ? 'rank third' :'' ">{{ index + 1 }}</span>
                        </template>
                        <template slot='completeTime' slot-scope="text, record">
                            <span>{{ formatTime(text) }}</span>
                        </template>
                    </a-table>
                </div>
            </a-col>
        </a-row>

    </div>
</template>

<script>
import { getAction } from '@/api/manage';
import moment from 'dayjs'
import {BoardMixin} from './boardMixin'
const columns_1 = [
    {
        title: '序号',
        width: 80,
        align: 'center',
        scopedSlots: { customRender: 'key' },
    },
    {
        title: '流程名称',
        dataIndex: 'processName',
        key: 'processName',
        align: 'left',

    },
    {
        title: '结束流程数',
        dataIndex: 'completeCount',
        key: 'completeCount',
        width: 120,
        align: 'right',
    },

];
const columns_2 = [
    {
        title: '序号',
        width: 80,
        align: 'center',
        scopedSlots: { customRender: 'key' },
    },
    {
        title: '流程名称',
        dataIndex: 'processName',
        key: 'processName',
        align: 'left',

    },
    {
        title: '平均运行时长',
        dataIndex: 'completeTime',
        key: 'completeTime',
        width: 180,
        align: 'right',
        scopedSlots: { customRender: 'completeTime' },
    },

];
const columns_3 = [
    {
        title: '序号',
        width: 80,
        align: 'center',
        scopedSlots: { customRender: 'key' },
    },
    {
        title: '流程名称',
        dataIndex: 'processName',
        key: 'processName',
        align: 'left',

    },
    {
        title: '未结束流程数',
        dataIndex: 'progressingCount',
        key: 'progressingCount',
        width: 120,
        align: 'right',
    },

];
const columns_4 = [
    {
        title: '序号',
        width: 80,
        align: 'center',
        scopedSlots: { customRender: 'key' },
    },
    {
        title: '流程名称',
        dataIndex: 'processName',
        key: 'processName',
        align: 'left',

    },
    {
        title: '超期结束流程数',
        dataIndex: 'overCount',
        key: 'overCount',
        width: 140,
        align: 'right',
    },

];

export default {
    mixins: [BoardMixin],
    data() {
        return {
            rankList:[
                {
                    key:1,
                    label:"结束流程数排名",
                    value:"complete",
                    columns:columns_1,
                    tableData:[],
                    queryType:"complete",
                    sortType:"startTime",
                },
                {
                    key:2,
                    label:"结束平均时长",
                    value:"completeTime",
                    columns:columns_2,
                    tableData:[],
                    queryType:"complete",
                    sortType:"consumeTime",
                },
                {
                    key:3,
                    label:"审批中流程排名",
                    value:"progressing",
                    columns:columns_3,
                    tableData:[],
                    queryType:"progressing",
                    sortType:"startTime",
                },
                {
                    key:4,
                    label:"结束超期排名",
                    value:"overdue",
                    columns:columns_4,
                    tableData:[],
                    queryType:"overdue",
                    sortType:"consumeTime",
                }
            ],
        }
    },
    props:{
        time:{
            type:Array,
            default:()=>[]
        },
    },
    watch:{
        time:{
            handler(){
                this.init()
            },
            deep:true,
        },
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            let startDate = `${moment(this.time[0]).format('YYYY-MM')}-01 00:00:00`
            let endDate = `${moment(this.time[1]).endOf('month').format('YYYY-MM-DD')} 23:59:59`
           for (let index = 0; index < this.rankList.length; index++) {
                getAction('/api/erpmng/sys/bpm/report/board/efficiencyRank',{startDate,endDate,sortType:this.rankList[index].value}).then(res=>{
                    this.$set(this.rankList[index],'tableData',res.result.splice(0,3))
                })
           }
        },
        // table 双击查看详情
        customRow(record,item) {
            let obj = {
                ...record,
                startDate:`${moment(this.time[0]).format('YYYY-MM')}-01 00:00:00`,
                endDate:`${moment(this.time[1]).endOf('month').format('YYYY-MM-DD')} 23:59:59`,
                queryType:item.queryType,
                sortType:item.sortType
            }
            const _this = this
            return {
                on: {
                    // 事件
                    dblclick: () => {
                        _this.$emit('processTaskModal', obj)
                    },
                    click: () => {
                        _this.$emit('processTaskModal', obj)
                    }
                }
            }
        },

       
    },
}
</script>

<style lang="less" scoped>
.rank-item {

    .item-list {
        padding: 6px;
        background-color: #fff;
        margin-bottom: 16px;

        .item-title {
            margin-bottom: 10px;
        }

        ::v-deep {
            .ant-table-tbody .ant-table-row td {
                padding-top: 8px;
                padding-bottom: 8px;
            }

            .ant-table-thead>tr>th,
            .ant-table-tbody>tr>td {
                padding: 8px 16px;
            }
        }
        .rank {
            display: inline-block;
            border-radius: 50%;
            
            font-size: 12px;
            height: 20px;
            width: 20px;
            text-align: center;
            line-height: 20px;
            color: #fff;
        }
        .first {
            background-color: #ff5b00;
        }
        .second {
            background-color: #ff8b00;
        }
        .third {
            background-color: #ff9e00;
        }
    }
}
</style>